<template>
  <div class="other">
    <div class="loading" v-if="pageStat">
      <Loading></Loading>
    </div>
    <div class="content">
      <Title :titleName="this.$route.params.id" v-if="!pageStat"></Title>
      <div class="list-item" v-for="item in itemList" :key="item.id">
        <img :src="item.item__icon" alt="" class="itemIcon">
        <div class="itemInfo">
          <span class="itemName">{{item.item__name}}</span>
          <div class="itemType">
            <span v-for="subtitle in item.item__subtitle" :key="subtitle">{{ subtitle }}</span>
          </div>
          <span class="itemDescription">{{item.item__description}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Loading from '@/components/loading/Loading.vue'
  import Title from '@/components/title/Title.vue'

  export default {
    data() {
      return {
        pageStat: true,
        itemList: []
      }
    },
    components: {
      Loading,
      Title
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        var id = this.$route.params.id
        console.log(id)
        if (id === "New Exotic Items") {
          axios.get("/api/getNewExoticItems")
            .then(res => {
              this.itemList = res.data
              this.$nextTick(() => {
                this.pageStat = false
              })
            })
            .catch(err => {
              console.error(err);
            })
        } else if (id === "New Quests") {
          this.getItemList(53, 14)
        } else if (id === "New Shaders") {
          this.getItemList(41, 14)
        } else if (id === "New Sparrows") {
          this.getItemList(43, 14)
        } else if (id === "New Ships") {
          this.getItemList(42, 14)
        } else {
          this.getItemList(39, 14)
        }

      },
      getItemList(c, s) {
        axios.get("/api/getNewItems", {
            params: {
              c: c,
              s: s
            }
          })
          .then(res => {
            this.itemList = res.data
            this.$nextTick(() => {
              this.pageStat = false
            })
          })
          .catch(err => {
            console.error(err);
          })
      },
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .other {
    height: 100%;
  }

  .list-item {
    display: flex;
    flex: 1;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }

  .itemIcon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin: 10px;
  }

  .itemInfo {
    color: white;
    flex-direction: column;
    margin-top: 10px;
  }

  .itemName {
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
  }

  .itemType {
    display: flex;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 5px;
  }

  .itemDescription {
    font-size: 13px;
    padding-right: 50px;
    margin-top: 5px;
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }

  .loading {
    height: 812px;
    overflow: hidden;
  }
</style>